<template>
  <div>
     <div class="father">
       <div class="box" :class="{active:id===1}" @click="id=1">1</div>
       <div class="box"  :class="{active:id===2}" @click="id=2" >2</div>
       <div class="box"  :class="{active:id===3}" @click="id=3" >3</div>
     </div>
   </div>
</template>
 
<script>
export default {

  data() {
    return {
    id:1
    };
  },

  methods: {
    fn(){
      this.color.active=!this.color.active
    }
  }
};
</script>

<style scoped>
    

     .box {
        border: 1px solid #333;
        width: 250px;
        height: 250px;
     }
     .father {
       display: flex;
     }
      .active {
        background-color:aqua; 
      }
</style>
